<template>
  <div class="person-wrap">
    <div class="main-content">
      <div class="tab">
        <span v-for="(item,i) in tabArr1" :key="'person' + i" :class="{active: i === personTab}" @click="handleTab(i)" >{{item}}</span>
      </div>
      <info v-show="personTab === 0" />
      <account v-show="personTab === 2" />
      <safe v-show="personTab === 1" @changeSafe="handleChange"/>
  </div>
  <model v-if="isModel" :type="type" @model="handleClose" />
  </div>
</template>
<script>
import account from './account.vue'
import safe from './safe.vue'
import info from './info.vue'
import model from './model.vue'
export default {
  name: 'personInfo',
  components: {
    account,
    safe,
    info,
    model
  },
  data () {
    return {
      tabArr1: ['个人信息', '账户安全', '账户绑定'],
      personTab: 0,
      isModel: false
    }
  },
  created () {
    console.log(this.$route.query.type + '===========================')
  },
  methods: {
    handleTab (i) {
      this.personTab = i
    },
    handleClose (val) {
      this.isModel = val
    },
    handleChange (val) {
      this.isModel = val.isModel
      this.type = val.type
    }
  }
}
</script>
<style lang="less" scoped>
.tab {
            border-bottom: 1px solid #C1C1C1;
          }
          .tab,.tab-zb-l {
            display: flex;
            align-items: center;
            .active {
              position: relative;
              color: #07997F;
              &::after {
                display: block;
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -1px;
                width: 30px;
                height: 2px;
                background: #07997F;
              }
            }
            span {
              display: block;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 48px;
              color: #333333;
              margin-right: 40px;
              cursor: pointer;
            }
          }
</style>
